<template>
  <div class="societyvideo">
    <div class="videobox" ref="videobox">
      <div class="header">
        <van-icon :name="$img('product_detail_back.png')" size=".6rem" @click.stop="goBack"/>
        <van-icon :name="$img('product_detail_share.png')" size=".6rem" @click="share" v-if="canShowShare"/>
      </div>
      <van-icon v-if="!isPlay" name="play-circle" class="play_icon" color="#ffffff" size=".8rem" @click.stop="goPlay"/>
      <video :src="detail.video_id" :poster="detail.cover" class="video" @click="goPlay" ref="video"></video>
      <div class="detail_content" v-if="!show">
        <div class="author_info">
          <van-image
            width=".72rem"
            height=".72rem"
            fit="cover"
            :src="detail.author && detail.author.avatar"
            round
          />
          <span class="author_name">{{detail.author && detail.author.nickname}}</span>
        </div>
        <div class="society_content van-multi-ellipsis--l2">{{detail.content}}</div>
        <div class="taggalshow"><span @click="show = true">展开</span></div>
        <div>
          <div class="good_info" v-if="detail.product !== ''" @click="toDetail(detail.product.id)">
            <van-image
              width="1rem"
              height="1rem"
              fit="cover"
              :src="detail.product.image"
            />
            <div class="info">
              <span class="van-ellipsis">{{detail.product.store_name}}</span>
              <p>￥{{detail.product.price}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="societyvideoFooter">
      <div @click="plshow = true" class="plinp">我来说两句...</div>
      <div @click="dolike">
        <van-icon name="like-o" size=".48rem" :color="detail.social_user_like_status_count ? '#FF2A1F' : '#ffffff'"/>
        <span class="num">{{detail.social_like_count}}</span>
      </div>
      <div @click="plshow = true">
        <van-icon name="chat-o" size=".48rem"/>
        <span class="num">{{detail.comment && detail.comment.length}}</span>
      </div>
    </div>
    <van-overlay :show="show" z-index="2001" class="seemore">
      <div class="detail_content">
        <div class="author_info">
          <van-image
            width=".72rem"
            height=".72rem"
            fit="cover"
            :src="detail.author && detail.author.avatar"
            round
          />
          <span class="author_name">{{detail.author && detail.author.nickname}}</span>
        </div>
        <div class="society_content">{{detail.content}}</div>
        <div class="taggalshow"><span @click="show = false">收起</span></div>
      </div>
    </van-overlay>
    <van-action-sheet v-model="plshow" :title="`${pllist.length}条评论`" class="plbox" ref="pllistbox">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        class="pllist"
        :immediate-check="false"
        v-if="pllist.length > 0"
      >
        <div class="plitem" v-for="(item, index) in pllist" :key="index">
          <div class="user_info">
            <van-image
              round
              width=".48rem"
              height=".48rem"
              fit="cover"
              :src="item.author.avatar"
            />
            <div class="user_name">
              <span>{{item.author.nickname}}</span>
              <p>{{item.create_time}}</p>
            </div>
            <div class="jb" @click="dojb(item.author.uid)">举报</div>
          </div>
          <p class="item_content">{{item.content}}</p>
          <van-divider />
        </div>
      </van-list>
      <div v-else class="nomore">暂无评论</div>
      <div class="pl">
        <input v-model="plvalue" type="text" placeholder="我来说两句...">
        <div class="sendpl" @click="sendpl">发送</div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isPlay: false,
      detail: '',
      show: false,
      plshow: false,
      loading: false,
      finished: false,
      pllist: [],
      page: 1,
      last_page: 100,
      plvalue: '',
      canShowShare: false
    }
  },
  methods: {
    goPlay () {
      this.isPlay ? this.$refs.video.pause() : this.$refs.video.play()
      this.isPlay = !this.isPlay
    },
    goBack () {
      if (this.$route.query.from) {
        if (this.$store.state.pl === 'ANDROID') {
          AndroidJsBridge.finish()
        } else if (this.$store.state.pl === 'IOS') {
          window.iosCallHandler('popBackVC')
        }
      } else {
        if (this.$store.state.pl === 'H5') {
          this.$router.go(-1)
        } else if (this.$store.state.pl === 'ANDROID') {
          AndroidJsBridge.finish()
        } else if (this.$store.state.pl === 'IOS') {
          window.iosCallHandler('popBackVC')
        }
      }
    },
    getDetail () {
      this.$axios.get(`/api/social/detail/${this.$route.params.id}`).then(res => {
        if (res.status === 200) {
          this.detail = res.data
          this.$shareInit(this.detail.cover, this.detail.content, this.detail.content, window.location.href)
        }
      })
    },
    dolike () {
      this.$axios.post('/api/user/sociallike', {
        social_id: this.detail.id
      }).then(res => {
        if (res.status === 200) {
          this.$dialog({ message: res.msg })
          if (this.detail.social_user_like_status_count > 0) {
            this.detail.social_user_like_status_count = 0
            this.detail.social_like_count--
          } else {
            this.detail.social_user_like_status_count = 1
            this.detail.social_like_count++
          }
        }
      })
    },
    onLoad () {
      if (this.page >= this.last_page) {
        this.loading = false
        this.finished = true
        return false
      }
      this.loading = true
      this.finished = false
      setTimeout(_ => {
        this.page++
        this.$axios.get(`/api/social/getSocialComment/${this.$route.params.id}`, {
          params: {
            page: this.page
          }
        }).then(res => {
          if (res.status === 200) {
            this.last_page = res.data.last_page
            this.pllist = this.pllist.concat(res.data.data)
          }
          this.loading = false
          this.finished = true
        })
      })
    },
    dojb (id) {
      this.$dialog.confirm({
        title: '提示',
        message: '是否举报该用户'
      }).then(_ => {
        this.$axios.get(`/api/social/report_social_comment/${id}`).then(_ => {
          this.$dialog({ message: '举报成功' })
        })
      })
    },
    getPLList () {
      this.$axios.get(`/api/social/getSocialComment/${this.$route.params.id}?_=${Math.random() * Math.random()}`).then(res => {
        if (res.status === 200) {
          this.last_page = res.data.last_page
          this.pllist = res.data.data
        }
      })
    },
    sendpl () {
      if (this.plvalue === '') {
        this.$dialog({ message: '请输入评论内容' })
        return false
      } else {
        this.$axios.post('/api/social/comment', {
          social_id: this.$route.params.id,
          content: this.plvalue,
          to_user_id: 0,
          parent_id: 0
        }).then(res => {
          if (res.status === 200) {
            this.plvalue = ''
            this.page = 1
            this.getPLList()
            this.detail.comment.length++
            this.$toast('评论成功')
          }
        })
      }
    },
    share () {
      if (this.$store.state.pl === 'ANDROID') {
        AndroidJsBridge.onClickShare()
      } else if (this.$store.state.pl === 'IOS') {
        window.iosCallHandler('onClickShare')
      }
    },
    toDetail (id) {
      this.$router.push(`/productDetail/${id}`)
    }
  },
  created () {
    this.getDetail()
    this.getPLList()
    if (this.$store.state.pl === 'ANDROID') {
      window.showShareBtn = _ => {
        this.canShowShare = true
      }
    } else if (this.$store.state.pl === 'IOS') {
      window.iosRegisterHandler('showShareBtn').then(_ => {
        this.canShowShare = true
      })
    } else {
      if (!this.$isWxBrowser()) {
        this.canShowShare = true
      }
    }
  }
}
</script>

<style lang="scss">
.societyvideo{
  background: #000000;
  height: 100%;
  width: 100%;
  .videobox{
    width: 100%;
    height: calc(100% - .96rem);
    display: flex;
    align-items: center;
    position: relative;
    .detail_content{
      color: #ffffff;
      display: flex;
      flex-direction: column;
      position: fixed;
      bottom: .96rem;
      left: 0;
      width: 100%;
      padding: 0 .24rem;
      z-index: 10;;
      .author_info{
        display: flex;
        align-items: center;
        margin-bottom: .16rem;
        .author_name{
          color: #ffffff;
          font-size: .28rem;
          margin-left: .16rem;
        }
      }
      .society_content{
        color: #ffffff;
        font-size: .3rem;
      }
      .taggalshow{
        color: #ffffff;
        font-size: .3rem;
        display: flex;
        justify-content: flex-end;
      }
    }
    .video{
      width: 100%;
      z-index: 1;
    }
    .header{
      box-sizing: border-box;
      position: fixed;
      top: 0;
      width: 100%;
      left: 0;
      display: flex;
      justify-content: space-between;
      padding: .54rem .32rem;
      z-index: 2002;
    }
    .play_icon{
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2000;
    }
  }
  .seemore{
    .detail_content{
      color: #ffffff;
      display: flex;
      flex-direction: column;
      position: fixed;
      bottom: .96rem;
      left: 0;
      width: 100%;
      padding: 0 .24rem;
      z-index: 10;;
      .author_info{
        display: flex;
        align-items: center;
        margin-bottom: .16rem;
        .author_name{
          color: #ffffff;
          font-size: .28rem;
          margin-left: .16rem;
        }
      }
      .society_content{
        color: #ffffff;
        font-size: .3rem;
      }
      .taggalshow{
        color: #ffffff;
        font-size: .3rem;
        display: flex;
        justify-content: flex-end;
      }
    }
  }
  .societyvideoFooter{
    width: 100%;
    color: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    height: .96rem;
    padding: 0 .24rem;
    justify-content: space-between;
    z-index: 2002;
    .plinp{
      width: 3.92rem;
      height: .66rem;
      border-radius: .6rem;
      background: #f0f0f0;
      font-size: .24rem;
      padding-left: .32rem;
      color: #000000;
    }
    &>div{
      display: flex;
      align-items: center;
      .num{
        font-size: .32rem;
        margin-left: .18rem;
      }
    }
  }
  .plbox{
    z-index: 2003;
    max-height: 80%;
    min-height: 20%;
    .van-action-sheet__content{
      max-height: 10rem;
      overflow: auto;
    }
    .pllist{
      padding-bottom: .66rem;
      .plitem{
        padding: 0 .24rem;
        .user_info{
          display: flex;
          align-items: center;
          .jb{
            width: .5rem;
            font-size: .24rem;
            color: #999999;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .user_name{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;
            margin-left: .16rem;
            span{
              color: #333333;
              font-size: .24rem;
              font-weight: 500;
            }
            p{
              color: #999999;
              font-size: .2rem;
            }
          }
        }
        .item_content{
          color: #333333;
          font-size: .24rem;
          margin-top: .22rem;
        }
      }
    }
    .pl{
      padding: 0 .24rem;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: .98rem;
      display: flex;
      justify-content: space-around;
      z-index: 2010;
      background: #ffffff;
      align-items: center;
      input{
        flex: 1;
        height: .66rem;
        background: #f0f0f0;
        border-radius: .6rem;
        color: #666666;
        font-size: .24rem;
        line-height: .66rem;
        padding-left: .32rem;
        margin-right: .26rem;
      }
      .sendpl{
        width: 1.56rem;
        height: .66rem;
        background: #ff2a1f;
        border-radius: .8rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: .28rem;
        color: #ffffff;
      }
    }
    .nomore{
      font-size: .4rem;
      text-align: center;
    }
  }
  .good_info{
    display: flex;
    margin: .24rem 0;
    padding: .16rem;
    border-radius: .16rem;
    background: #ffffff1a;
    .info{
      margin-left: .24rem;
      span{
        font-size: .28rem;
        color: rgb(53, 50, 50);
        font-weight: 700;
      }
      p{
        margin-top: .3rem;
        font-size: .24rem;
        color: #FF2A1F;
      }
    }
  }
}
</style>
